<template>
  <div class="app-container">
    <el-form :model="queryForm" ref="queryFormRef" :inline="true">
      <el-form-item prop="title" label="标题">
        <el-input v-model="queryForm.title" placeholder="请输入标题" @press-enter="handleQuery" />
      </el-form-item>
      <el-form-item prop="path" label="地址">
        <el-input v-model="queryForm.path" placeholder="请输入地址" @press-enter="handleQuery" />
      </el-form-item>
      <el-form-item prop="action" label="类型">
        <el-select v-model="queryForm.action" placeholder="请选择类型">
          <el-option label="GET" value="GET" />
          <el-option label="POST" value="POST" />
          <el-option label="PUT" value="PUT" />
          <el-option label="DELETE" value="DELETE" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-space size="default">
          <el-button v-has="'admin:sysApi:query'" type="primary" @click="handleQuery" icon="Search">
            搜索
          </el-button>
          <el-button @click="handlResetQuery" icon="Refresh">
            重置
          </el-button>
        </el-space>
      </el-form-item>
    </el-form>

    <el-divider />

    <!-- Table -->
    <el-table :data="tableData" row-key="id" @page-change="handlePageChange" @page-size-change="handlePageSizeChange">
      <el-table-column label='标题' prop='title'></el-table-column>
      <el-table-column label='请求类型' prop='action'>
        <template #default="scope">
          <el-tag v-if="scope.row.action.toLowerCase() === 'get'" effect="dark" type="">{{scope.row.action}}</el-tag>
          <el-tag v-else-if="scope.row.action.toLowerCase() === 'post'" effect="dark" type="success">{{ scope.row.action
            }}</el-tag>
          <el-tag v-else-if="scope.row.action.toLowerCase() === 'put'" effect="dark" type="warning">{{ scope.row.action
            }}</el-tag>
          <el-tag v-else-if="scope.row.action.toLowerCase() === 'delete'" effect="dark" type="danger">{{
            scope.row.action}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label='请求信息' prop='path'></el-table-column>
      <el-table-column label='创建时间' prop='createdAt'></el-table-column>
      <el-table-column label='操作' prop='action'>
        <template #default="scope">
          <el-button v-has="'admin:sysApi:edit'" icon="Edit" type="primary" text @click="handleUpdate(scope.row)"> 修改
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-pagination :page-size="10" v-model="currentPage" layout="prev, pager, next" :total="pager.count"
      @current-change="handlePageChange" />

    <!-- Drawer -->
    <el-drawer v-model="drawerVisible" title="修改接口管理" :width="450" @before-ok="handleDrawerSubmit"
      @closed="handleDrawerCancel">
      <el-form :model="drawerForm" ref="drawerFormRef" :rules="rules">
        <el-form-item prop="handle" label="Handle">
          <el-input v-model="drawerForm.handle" placeholder="请输入Handle" />
        </el-form-item>
        <el-form-item prop="title" label="标题">
          <el-input v-model="drawerForm.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item prop="type" label="类型">
          <el-select v-model="drawerForm.type" placeholder="请选择类型" allow-clear>
            <el-option label="SYS" value="SYS" />
            <el-option label="BUS" value="BUS" />
          </el-select>
        </el-form-item>
        <el-form-item prop="action" label="方式">
          <el-select v-model="drawerForm.action" placeholder="请选择请求方式" allow-clear>
            <el-option label="GET" value="GET" />
            <el-option label="POST" value="POST" />
            <el-option label="PUT" value="PUT" />
            <el-option label="DELETE" value="DELETE" />
          </el-select>
        </el-form-item>
        <el-form-item prop="path" label="路径">
          <el-input v-model="drawerForm.path" disabled />
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script setup>
import { reactive, ref, getCurrentInstance, onMounted, nextTick } from 'vue';
import { getSysApi,addSysApi,updateSysApi } from '@/api/admin/sys-api';

const { proxy } = getCurrentInstance();

// 分页当前页
const currentPage = ref(1), 
      queryForm = reactive({});

// Pager
const pager = {
  count: 0,
  pageIndex: 1,
  pageSize: 10,
};

// From 定义
// const queryForm = reactive({});
const drawerForm = reactive({});

// From 校验规则
const rules = {
  title: [{ required: true, message: '请输入标题' }],
  method: [{ required: true, message: '请选择方式' }],
};

// 抽屉显示
const drawerVisible = ref(false);
const drawerFormRef = ref({});
const queryFormRef = ref({});

// Table Data
const tableData = ref([]);

// Drawer 确定事件
// 异步关闭Modal需要调用 done()
const handleDrawerSubmit = (done) => {
  drawerFormRef.value.validate(async (valid) => {
    if (valid) {
      let res;
      if (!drawerForm.id) {
        const { code, msg } = await addSysApi(drawerForm);
        if (code == 200 ) {
          proxy.$message.success('新增成功');
        } else {
          proxy.$message.error(msg);
        }
      } else {
        const { code, msg } = await updateSysApi(drawerForm, drawerForm.id);
        if (code == 200 ) {
          proxy.$message.success('修改成功');
        } else {
          proxy.$message.error(msg);
        }
      }
      drawerVisible.value = false;
      done();
      getSysApiInfo(pager);
    } else {
      proxy.$message.error('表单校验失败');
      done(false);
    }
  });
};

// Drawer 关闭事件
const handleDrawerCancel = () => {
  drawerVisible.value = false;
};

// 查询
const handleQuery = async () => {
  getSysApiInfo(queryForm);
  currentPage.value = 1;
};

// 重置查询
const handlResetQuery = () => {
  queryFormRef.value.resetFields();

  handlePageChange(1);
};

// 修改
const handleUpdate = async (record) => {
  console.log(record)
  drawerVisible.value = true;
  // updateSysApi(record);
  await nextTick();
  Object.assign(drawerForm, record);
};

/**
 * 分页改变
 * @param {Number} [page]
 */
const handlePageChange = (page) => {
  pager.pageIndex = page;

  // 修改当前页码
  currentPage.value = page;
  getSysApiInfo({ ...pager, ...queryForm });
};

// 每页数据量
const handlePageSizeChange = (pageSize) => {
  pager.pageSize = pageSize;
  getSysApiInfo({ ...pager, ...queryForm });
};

// 获取接口信息
const getSysApiInfo = async (params = {}) => {
  const { data, code, msg } = await getSysApi(params);
  if ( code == 200 ) {
    tableData.value = data.list;
    Object.assign(pager, { count: data.count, pageIndex: data.pageIndex, pageSize: data.pageSize });
  } else {
    proxy.$message.error(msg);
  }
};

onMounted(async () => {
  getSysApiInfo(pager);
});
</script>

<style lang="scss">
.pagination {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

// Table 操作列样式
.arco-table-th:last-child>span {
  margin-left: 15px;
}
</style>
